<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>spirit8</title>

    <!-- 引入 bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- 引用swiper(轮播) -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">

    <!-- 引入重置样式less -->
    <link rel="stylesheet/less" href="./css/reset.less">

    <!-- 引用公共样式 -->
    <link rel="stylesheet/less" href="./css/common.less">

    <!-- 引用独立样式 -->
    <link rel="stylesheet/less" href="./css/index.less">

</head>

<body>
    <nav class="navbar navbar-default">
        <!--
        bootstrap自带class类名
        container-fluid  100%宽度铺满视口的容器
        container    固定宽度并支持响应式布局的容器
          -->
        <div class="container">
            <!-- 网页logo和移动端导航栏 -->
            <div class="navbar-header">
                <!-- 移动端导航栏按钮 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- 网页logo -->
                <a class="navbar-brand" href="#">spirit8</a>
            </div>

            <!-- 导航 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#banner">home</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#team">services</a></li>
                    <li><a href="#portfolio">portfolio</a></li>
                    <li><a href="#testimonials">testimonials </a></li>
                    <li><a href="#contact">contact </a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->

        <!-- hone -->
        <div id="banner">
            <div class="title">
                <h3><span>wELCOME on</span> spirit8</h3>
            </div>
            <div class="content">
                <p>We are a digital agency with <span>years of experience</span> and with <span>4extraordinary
                        people</span></p>
            </div>
            <div class="xiab"><img src="./imges/arrow.png" alt=""></div>
        </div>

        <!-- about -->
        <div id="about">
            <div class="right"><img src="./imges/about-background.png" alt=""></div>

            <div class="lfet">

                <div class="one">
                    <div class="biaotia">
                        <p>About us</p>
                    </div>
                    <div class="biaotib">
                        <h3><span>Some words</span> about us</h3>
                    </div>
                </div>

                <div class="hengx"></div>

                <div class="two">
                    <p>We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                        illustration, we brand companies in a way they will never forget.</p>
                </div>

                <div class="three">
                    <div class="bta"><img src="./imges/icon16.png" alt="">
                        <p><span>Mission</span> - We deliver uniqueness and quality</p>
                    </div>
                    <div class="bta"><img src="./imges/icon16.png" alt="">
                        <p><span>Skills</span> - Delivering fast and excellent results</p>
                    </div>
                    <div class="bta"><img src="./imges/icon16.png" alt="">
                        <p><span>Mission</span> - We deliver uniqueness and quality</p>
                    </div>
                </div>

                <div class="four"><img src="./imges/about-btn.png" alt="">
                    <p>Browse our work</p>
                </div>

            </div>
        </div>

        <!-- team -->
        <div id="team">

            <!-- 一 -->
            <div class="toubu">
                <h3>Meet <span>our team</span></h3>
                <div class="hxa"></div>
                <div class="hxb"></div>

                <!-- 二 -->
                <div class="swiper team-swiper container">
                    <div class="swiper-wrapper">

                        <!-- 页面1 -->
                        <div class="swiper-slide">
                            <!-- 样式大盒 -->
                            <div class="list">
                                <!-- 1 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 2 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 3 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 4 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- 页面2 -->
                        <div class="swiper-slide">
                            <!-- 样式大盒 -->
                            <div class="list">
                                <!-- 1 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 2 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 3 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 4 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- 页面3 -->
                        <div class="swiper-slide">
                            <!-- 样式大盒 -->
                            <div class="list">
                                <!-- 1 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 2 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 3 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                                <!-- 4 -->
                                <div class="item">
                                    <div class="touxiang">
                                        <img src="./imges/avatar.jpg" alt="">
                                    </div>
                                    <div class="user-info">
                                        <p>Jason Statham</p>
                                        <p>Knife designer</p>
                                    </div>
                                    <div class="content">
                                        <p>Do not seek to change what has come before. Seek to create that which has
                                            not.</p>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div> -->

                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
            </div>
        </div>

        <!-- portfolio -->
        <div id="portfolio">
            <!-- 头部 -->
            <div class="toubua">
                <h3>take a look at <span>our services</span></h3>
                <div class="hxc"></div>
                <div class="hxd"></div>
            </div>
            <!-- 内容 -->
            <div class="neir">
                <!-- 一 -->
                <div class="item">
                    <div class="tup">
                        <img src="./imges/dx.png" alt="">
                    </div>
                    <div class="biaotic">
                        <h3>Web design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <!-- 二 -->
                <div class="item">
                    <div class="tup">
                        <img src="./imges/dx.png" alt="">
                    </div>
                    <div class="biaotic">
                        <h3>Web design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <!-- 三 -->
                <div class="item">
                    <div class="tup">
                        <img src="./imges/dx.png" alt="">
                    </div>
                    <div class="biaotic">
                        <h3>Web design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <!-- 四 -->
                <div class="item">
                    <div class="tup">
                        <img src="./imges/dx.png" alt="">
                    </div>
                    <div class="biaotic">
                        <h3>Web design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
            </div>

        </div>

        <!-- testimonials -->
        <div id="testimonials">
            <!-- 头部 -->
            <div class="toubub">
                <h3>SOME OF <span>OUR CLIENTS</span></h3>
                <div class="hxe"></div>
                <div class="hxf"></div>
            </div>

            <!-- 分页轮播 -->
            <div class="swiper team-swiper container">
                <div class="swiper-wrapper">
                    <!-- 页面1 -->
                    <div class="swiper-slide">
                        <div class="list">
                            <h3>chanel zara guerlaln lancome lacoste</h3>
                        </div>
                    </div>
                    <!-- 页面2 -->
                    <div class="swiper-slide">
                        <div class="list">
                            <h3>chanel zara guerlaln lancome lacoste</h3>
                        </div>
                    </div>
                    <!-- 页面3 -->
                    <div class="swiper-slide">
                        <div class="list">
                            <h3>chanel zara guerlaln lancome lacoste</h3>
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination">

                </div>
            </div>
        </div>

        <!-- contact -->
        <div id="contact">
            <div class="biaotid">
                <h3>take a look at <span>our work</span></h3>
                <div class="hxg"></div>
                <div class="hxh"></div>
            </div>

            <div class="content">
                <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                    from a line in section 1.10.32.</p>
            </div>
        </div>

        <!-- Filter by type -->
        <div class="filter">

            <!-- 头部 -->
            <div class="toubuc">
                <div class="hs">
                    <h3> Filter by type </h3>
                </div>
                <div class="hp">
                    <div class="item">
                        <p>All</p>
                    </div>
                    <div class="item">
                        <p>Web design</p>
                    </div>
                    <div class="item">
                        <p>Mobile design</p>
                    </div>
                    <div class="item">
                        <p>Photograpy</p>
                    </div>
                </div>
            </div>

            <div class="content">
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>
                <div class="item"> <img src="./imges/2.jpg" alt=""></div>

            </div>
        </div>

        <!-- clients -->
        <div class="clients">
            <!-- 头部 -->
            <div class="toubue">
                <h3><span>our clients'</span> testimonials</h3>
                <div class="hxi"></div>
                <div class="hxj"></div>
            </div>

            <!-- 分页轮播 -->
            <div class="swiper team-swiper container">
                <div class="swiper-wrapper">
                    <!-- 页面1 -->
                    <div class="swiper-slide">
                        <div class="list">
                            <p class="a">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance. The
                                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                                1.10.32.</p>
                            <p class="p">Dean Martin, CEO Acme Inc.</p>
                        </div>
                    </div>
                    <!-- 页面2 -->
                    <div class="swiper-slide">
                        <div class="list">
                            <p class="a">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance. The
                                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                                1.10.32.</p>
                            <p class="p">Dean Martin, CEO Acme Inc.</p>
                        </div>
                    </div>
                    <!-- 页面3 -->
                    <div class="swiper-slide">
                        <div class="list">
                            <p class="a">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance. The
                                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                                1.10.32.</p>
                            <p class="p">Dean Martin, CEO Acme Inc.</p>
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination">

                </div>
            </div>
        </div>

        <!-- feel free to contact us -->
        <div class="us">
            <!-- 头部 -->
            <div class="toubuk">
                <h3>feel free to<span> contact us</span></h3>
                <div class="hxl"></div>
                <div class="hxm"></div>
            </div>

            <div class="nrong">
                <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. </p>
            </div>

            <!--  -->
            <div class="dibu">
                <div class="one">
                    <div class="onea">
                        <p>Name <span>*</span></p> <input type="text">
                    </div>
                    <div class="onea">
                        <p>Email address <span>*</span></p> <input type="text">
                    </div>
                </div>
                <div class="two">
                    <p>Message<span>*</span></p> <input type="text">
                </div>
                <div class="three">
                    <div class="ann"><h3>send</h3></div>
                </div>
            </div>
        </div>

        <!-- 返回顶部按钮
        <div class="fhdb">
            <a href="#banner">返回顶部</a>
        </div> -->

    </nav>
</body>

</html>



<!-- 引用jQ -->
<script src="./js/jquery-3.7.1.min.js"></script>

<!-- 引用js -->
<script src='./js/less.min.js'></script>

<!-- 引用 bootstrap -->
<script src="./js/bootstrap.min.js"></script>

<!-- 引用swiper -->
<script src="./js/swiper-bundle.min.js"></script>

<!-- 初始化swiper -->
<script>
    var TeamSwiper = new Swiper('.team-swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            // 开启分页器点击事件
            clickable: true,
        },

        // 如果需要前进后退按钮
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },

        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })        
</script>